<!-- 获取位置的界面 -->
<template>
  <view>
    <view v-if="!orderAddresInfoShow">
      <!-- 头部导航栏 -->
      <view class="top-navigate bg-yellow" style="padding: 53px 10px 130px 10px;">
        <navigator class="content cuIcon-back text-xl top-navigate-title" hover-class="none"
          url="../../pages/index/index" open-type="redirect">
        </navigator>
        <view class="text-xl top-navigate-title">校园跑腿</view>
        <view class="text-black text-sm flex">
          <view class="cuIcon-check margin-right-xs">同城急送</view>
          <view class="cuIcon-check">又快又省</view>
        </view>

      </view>
      <!-- 地图定位区域 -->
      <view class='map-box'>
        <map ref="myMap" :longitude="longitude" :latitude="latitude" :scale="scale" @tap='clickmap' :markers='covers'
          class="map-location">
        </map>
      </view>
      <!-- 地址区域 -->
      <view class="address-box">
        <scroll-view scroll-x class="bg-white nav">
          <view class="flex text-center">
            <view class="cu-item flex-sub text-df" :class="index==TabCur?'bg-orange cur':''"
              v-for="(item,index) in pickSendList" :key="index" @tap="tabSelect" :data-id="index"
              style="border-radius:20px;">
              {{item}}
            </view>
          </view>
        </scroll-view>
        <!-- 帮我送地址区域 -->
        <view class="pick-send-address" v-if="TabCur== 0">
          <view class="address-now">
            <button class="cu-btn cuIcon bg-black">
              <text class="text-white">取</text>
            </button>
            <view class="address-text" @click="editeOrderStartInfo">
              <text class="text-df text-black text-cut" style="width: 250px;">{{address.name||'填写取件地址'}}</text>
              <text class="text-sm text-red">{{address.userName+address.phone||'填写联系人'}}</text>
            </view>
          </view>
          <view class="address-new" style=" margin-top: 10px;">
            <button class="cu-btn cuIcon bg-red">
              <text class="text-white">收</text>
            </button>
            <view class="address-text" @click="editeOrderEndInfo">
              <text class="text-df text-black text-cut" style="width: 250px;">{{addressEnd.name||'填写收件地址'}}</text>
              <text class="text-sm text-red">{{addressEnd.userName+addressEnd.phone ||'填写联系人'}}</text>
            </view>
          </view>
        </view>
        <!-- 帮我取地址区域 -->
        <view class="pick-send-address" v-else>
          <view class="address-new">
            <button class="cu-btn cuIcon bg-red">
              <text class="text-white">收</text>
            </button>
            <view class="address-text" @click="editeOrderEndInfo">
              <text class="text-df text-black text-cut" style="width: 250px;">{{address.name || '填写取件地址'}}></text>
              <text class="text-sm text-red">{{address.userName+address.phone||'填写联系人'}}</text>
            </view>
          </view>
          <view class="address-now" style=" margin-top: 10px;">
            <button class="cu-btn cuIcon bg-black">
              <text class="text-white">取</text>
            </button>
            <view class="address-text" @click="editeOrderStartInfo">
              <text class="text-df text-black text-cut" style="width: 250px;">{{addressEnd.name ||'填写收件地址'}}</text>
              <text class="text-sm text-red">{{addressEnd.userName+addressEnd.phone||'填写联系人'}}</text>
            </view>
          </view>
        </view>
        <button class="cu-btn round bg-orange shadow lg flex" style="margin: 15px auto;width: 95%;"
          @click="placeOrder">去下单
        </button>
      </view>
      <!-- 代取送 流程 -->
      <view class="pick-send-flow">
        <view class="flow-title">
          <view style="font-weight: 700;" class="text-lg">
            帮送服务流程
          </view>
          <view class="text-sm text-gray">
            常见问题>
          </view>
        </view>
        <view class="bg-white padding  margin-top-xs" style="font-weight: 700;">
          <view class="cu-steps steps-arrow">
            <view class="cu-item text-sm" v-for="(item,index) in basicsFlowList" :key="index">
              <text :class="'cuIcon-' + item.cuIcon"></text> {{item.name}}
            </view>
          </view>
        </view>
      </view>

    </view>
    <order-address-info v-else></order-address-info>
  </view>
</template>

<script>
  import amap from '@/helper/amap-wx.130.js'
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        amapPlugin: null,
        key: '395d7dee752cc1f00bfee27142e41f85',
        longitude: 0, //记录实时点击位置
        latitude: 0,
        scale: '16',
        //是否解析地址信息
        geocode: true,
        // 定位标记
        covers: [{
          id: 0,
          longitude: 0,
          latitude: 0,
          iconPath: '',
          width: 15,
          height: 15,
          label: {
            content: '当前位置',
            textAlign: 'center',
            color: '#FB3109'
          }
        }],
        pickSendList: ['帮我送', '帮我取'],
        TabCur: 0,
        scrollLeft: 0,
        //流程图 数据列表
        basicsFlowList: [{
            name: '1.填帮送信息',
            cuIcon: 'write'
          },
          {
            name: '2.支付跑腿费',
            cuIcon: 'sponsor'
          },
          {
            name: '3.骑手取送件',
            cuIcon: 'pulldown'
          },
          {
            name: '4.签收完成',
            cuIcon: 'squarecheck'
          },
        ],
        //订单地址信息表单
        orderAddresInfoShow: false,
        orderAddresInfoShowFlag: 0,
        //辩解是否是下单页
        ifPlaceSend: true
      };
    },
    computed: {
      ...mapState('m_user', ['userinfo', 'address', 'addressEnd']),
    },
    //方法集合
    methods: {
      ...mapMutations('m_user', ['updateAddress']),
      //获取位置信息
      getRegeo() {
        uni.showLoading({
          title: '正在获取定位'
        });
        this.amapPlugin.getRegeo({
          success: (data) => {
            console.log(data)
            this.longitude = data[0].longitude;
            this.latitude = data[0].latitude;
            //为标记点经纬度重新赋值【在data中赋坐标的方式无效】
            this.covers[0].longitude = data[0].longitude;
            this.covers[0].latitude = data[0].latitude;
            this.updateAddress({
              name: data[0].name,
              latitude: data[0].latitude,
              longitude: data[0].longitude,
              userName: this.userinfo.user_name,
              phone: this.userinfo.user_phone,
              address: data[0].regeocodeData.formatted_address
            })
            uni.hideLoading()
          },
          fail: (err) => {
            uni.hideLoading();
            // uni.showModal({
            //   title: '提示',
            //   content: '位置信息获取失败（请确定定位功能是否打开）',
            //   showCancel: false
            // });
          },
        });
      },
      //点击地图时触发
      clickmap(info) {
        uni.chooseLocation({
          success: (res) => {
            console.log(res);
            this.longitude = res.longitude;
            this.latitude = res.latitude;
            this.updateAddress({
              name: res.name,
              latitude: res.latitude,
              longitude: res.longitude,
              userName: this.userinfo.user_name,
              phone: this.userinfo.user_phone,
              address: res.address
            })
            //为标记点经纬度重新赋值【在data中赋坐标的方式无效】
            this.covers[1] = {
              id: 1,
              longitude: res.longitude,
              latitude: res.latitude,
              iconPath: '',
              width: 15,
              height: 15,
              label: {
                content: '新位置',
                textAlign: 'center',
                color: '#fbbd08'
              }
            }
            // this.covers[0].longitude = res.longitude;
            // this.covers[0].latitude = res.latitude;
            console.log('位置名称：' + res.name);
            console.log('详细地址：' + res.address);
            console.log('纬度：' + res.latitude);
            console.log('经度：' + res.longitude);
          },
          fail: (err) => {
            uni.showToast({
              title: '获取位置失败'
            });
          }
        });
      },
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      },
      //编辑送取货订单起点位置信息
      editeOrderStartInfo() {
        this.orderAddresInfoShowFlag = 1
        this.orderAddresInfoShow = true
      },
      //编辑送取货订单终点位置信息
      editeOrderEndInfo() {
        this.orderAddresInfoShowFlag = 2
        this.orderAddresInfoShow = true
      },
      //去下单按钮事件
      placeOrder() {
        if (JSON.stringify(this.address) == "{}" || JSON.stringify(this.addressEnd) == "{}") return uni.$showMsg('请先填写地址信息！')
        uni.navigateTo({
          url: '/subpkg/place-order/place-order?TabCur=' + this.TabCur
        })
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.amapPlugin = new amap.AMapWX({
        key: this.key
      });
      //获取位置信息
      this.getRegeo();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      //获取当前地图的信息
      // let myMapInfo = this.$refs.myMap
      // console.log(myMapInfo)
      // uni.onLocationChange()
    },
  }
</script>


<style lang="scss" scoped>
  .top-navigate {
    display: flex;
    justify-content: left;
    align-items: center;

    .top-navigate-title {
      margin: 0 5px;
      font-weight: bold;
    }
  }

  .map-box {
    position: relative;
    top: -100px;
    width: 95%;
    background-color: white;
    margin: 0 auto;
    padding: 5px;
    border-radius: 10px;

    .map-location {
      width: 100%;
      border-radius: 10px;
      height: 250px;
    }
  }

  .address-box {
    position: relative;
    top: -110px;
    width: 95%;
    height: 250px;
    background-color: white;
    margin: 0 auto;
    padding: 5px;
    border-radius: 10px;

    .pick-send-address {
      padding: 15px;

      .address-now,
      .address-new {
        height: 50px;
        display: flex;
        justify-content: left;
        align-items: center;

        .address-text {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
        }
      }

      .address-new {
        height: 50px;
        border-radius: 10px;
        background-color: #efefef;
        display: flex;
        justify-content: left;
        align-items: center;
      }
    }
  }

  .pick-send-flow {
    position: relative;
    width: 95%;
    top: -100px;
    border-radius: 10px;
    padding: 10px;
    background-color: white;
    margin: 0 auto;

    .flow-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .cuIcon {
    width: 50rpx;
    height: 50rpx;
    border-radius: 500rpx;
    padding: 0;
    margin-left: 10rpx;
  }
</style>